<template>
  <div class="component-bar bar-bottom-fixed">
    <template v-for="it in list">
      <router-link :to="{path: it.path}" :key="it.name"><r-icon :name="it.icon"/>{{it.name}}</router-link>
    </template>
  </div>
</template>
<script>
import RIcon from './r-icon'
export default {
  name: 'r-bar',
  components: {
    RIcon
  },
  data () {
    return {
      list: [
        {
          name: '首页',
          path: '/home',
          icon: 'home.svg'
        },
        {
          name: '发现',
          path: '/discover',
          icon: 'compass.svg'
        },
        {
          name: '购物车',
          path: '/cart',
          icon: 'cart.svg'
        },
        {
          name: '订单',
          path: '/orders',
          icon: 'clock.svg'
        },
        {
          name: '我的',
          path: '/uc',
          icon: 'user.svg'
        }
      ]
    }
  }
}
</script>
<style lang="scss">
  @import "../styles/index";

  .component-bar {
    a {
      text-align: center;
      font-size: 12px;
      line-height: 18px;
      @extend %flex-center;
      flex-direction: column;
      flex: 1;
      color: $color-body;
      padding: 5px 0 2px;
    }

    svg {
      height: 20px;
      fill: currentColor;
    }

    svg[name=clock] {
      height: 22px;
    }

    .active {
      color: $color-primary;
    }
  }
</style>
